<!--
 * @Description: 一周内温度报警统计
 * @FilePath: \hk-computerRoom-Security\src\views\home\component\echart-temperature.vue
 * @Date: 2024-01-17 09:10:54
 * @LastEditTime: 2024-03-04 15:14:17
-->

<template>
	<div>
		<EchartsBox :title="'一周内温度报警统计'">
			<template #content>
				<div ref="myChartRef" class="content-box" v-if="state.lastWeeksData.length && state.currentWeeksData.length"></div>
				<NoData class="content-box" v-else></NoData>
			</template>
		</EchartsBox>
	</div>
</template>
<script setup lang="ts" name="echat-temperature">
import { onMounted, ref, nextTick, reactive } from 'vue';
import EchartsBox from './echarts-box.vue';
import { useHomeApi } from '/@/api/home/index';
import * as echarts from 'echarts';

const myChartRef = ref();
let myChart: any = null; // echarts实例对象

const state = reactive({
	lastWeeksData: [],
	currentWeeksData: [],
});

onMounted(() => {
	getTemperatureAlarm();
});

// 变化尺寸
const watchEchart = () => {
	var ro = new ResizeObserver(() => {
		myChart.resize(); //监测到div尺寸变化后调用
	});
	ro.observe(myChartRef.value);
};

// 获取温度报警统计
const getTemperatureAlarm = async () => {
	const data = await useHomeApi().queryAlarmPropertyHistoryByWeek({ type: 1 });
	if (data.code == 200) {
		state.currentWeeksData = data.data.thisWeek;
		state.lastWeeksData = data.data.lastWeek;
	}
	state.currentWeeksData = [26, 18, 12, 26, 18, 28, 17];
	state.lastWeeksData = [15, 27, 16, 20, 15, 22, 19];

	nextTick(() => {
		initCharts();
		watchEchart();
	});
};

const initCharts = () => {
	let option = {
		tooltip: {
			trigger: 'axis',
			backgroundColor: 'rgba(72, 101, 161, 0.7)',
			borderWidth: 0,
			textStyle: {
				color: '#fff',
				fontSize: 16,
				fontWeight: 'bold',
			},
			axisPointer: {
				type: 'shadow',
			},
			formatter: function (params: any) {
				let newVal = params[0].name;
				params.forEach((item: any) => {
					newVal += '<br/>' + item.marker + ' ' + item.seriesName + ' ' + item.value + '℃';
				});
				return newVal;
			},
		},
		legend: {
			data: ['本周', '上周'],
			right: 20,
			top: 20,
			textStyle: {
				color: '#fff',
				fontSize: 14,
			},
			itemWidth: 24,
			itemHeight: 16,
		},
		grid: {
			left: '3%',
			right: '4%',
			bottom: '3%',
			top: '15%',
			containLabel: true,
		},
		xAxis: [
			{
				type: 'category',
				data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
				axisLine: {
					show: true,
					lineStyle: {
						color: 'rgba(100, 135, 200, 1)',
						width: 2,
						type: 'solid',
					},
				},
				axisTick: {
					show: false,
				},
				axisLabel: {
					//  改变x轴字体颜色和大小
					color: 'rgba(156, 165, 198, 1)',
					fontSize: 12,
				},
			},
		],
		yAxis: [
			{
				type: 'value',
				axisTick: {
					show: false,
				},
				splitLine: {
					show: true,
					lineStyle: {
						color: 'rgba(100, 135, 200, 0.50)',
						type: 'dashed', // 设置背景横线为虚线
					},
				},
				axisLine: {
					//  改变y轴颜色
					show: false,
					lineStyle: {
						color: '#415264',
						width: 2,
						type: 'solid',
					},
				},
				axisLabel: {
					//  改变y轴字体颜色和大小
					formatter: '{value} ℃ ',
					color: 'rgba(156, 165, 198, 1)',
					fontSize: 12,
				},
			},
		],
		series: [
			{
				name: '本周',
				type: 'bar',
				data: state.currentWeeksData,
				barWidth: 15, //柱子宽度
				barGap: 0.2, //柱子之间间距
				itemStyle: {
					borderRadius: [30, 30, 0, 0],
					color: new echarts.graphic.LinearGradient(
						0,
						0,
						0,
						1,
						[
							{
								offset: 0,
								color: 'rgba(11, 112, 247, 1)', // 100% 处的颜色
							},
							{
								offset: 1,
								color: 'rgba(12, 30, 61, 0.59)', // 0% 处的颜色
							},
						],
						false
					),
				},
			},
			{
				name: '上周',
				type: 'bar',
				data: state.lastWeeksData,
				barWidth: 15,
				barGap: 0.2,
				itemStyle: {
					borderRadius: [30, 30, 0, 0],
					color: new echarts.graphic.LinearGradient(
						0,
						0,
						0,
						1,
						[
							{
								offset: 0,
								color: 'rgba(3, 241, 251, 1)', // 100% 处的颜色
							},
							{
								offset: 1,
								color: 'rgba(24, 56, 64, 0.30)', // 0% 处的颜色
							},
						],
						false
					),
				},
			},
		],
	};

	myChart = echarts.init(myChartRef.value as HTMLDivElement);
	myChart.setOption(option, true);
};
</script>
<style lang="scss" scoped>
.content-box {
	width: 100%;
	height: 100%;

	:deep(.no-data) {
		width: 200px;
		height: 200px;
	}
}
</style>
